<!--
 * @Author: your name
 * @Date: 2021-10-21 15:49:00
 * @LastEditTime: 2022-12-27
 * @LastEditors: JIAR
 * @Description: In User Settings Edit
 * @FilePath: \macc.admin.vue\src\views\monitor\overview\virtualAlarm\virtualAlarm.vue
-->
<template>
  <a-popover placement="right" v-if="warnTypeList.length > 0">
    <template slot="content" v-for="item in warnTypeList">
      <div :key="item.key" class="warnItem" style="margin-bottom: 5px">
        <span style="padding-right: 10px">{{ item.name }}</span>
        <a-switch
          @change="
            (checked, event) => {
              onChange(checked, item.key);
            }
          "
          :checked="item.status != 'close'"
          :size="'small'"
        />
      </div>
    </template>
    <template slot="title">
      <div class="warnItem">
        <span>{{ $t('groupOperate.VRwarn') }}</span>
        <a-button
          :size="'small'"
          v-if="warnTypeList.length > 0"
          @click="
            (event) => {
              onChange(true, 'ALL');
            }
          "
          >{{ $t('groupOperate.openall') }}</a-button
        >
      </div>
    </template>
    <a-icon type="caret-down" />
  </a-popover>
</template>
<script>
import { requestHttp, maccApi } from '@utils/index';
import { i18nRender } from '@/locales';
export default {
  name: 'VirtualAlarm',
  props: {
    groupId: Number,
  },
  data() {
    return {
      warnTypeList: [],
    };
  },
  mounted() {
    this.getExperienceWarnType();
  },
  methods: {
    async getExperienceWarnType() {
      const results = await requestHttp({
        api: `${maccApi.SIMULATIONEXPERIENCE_WARNTYPE_GET_API.replace(
          '{groupId}',
          this.groupId
        )}`,
        method: 'GET',
      });
      if (results && results.code == 0) {
        const list = results.list || [];
        this.warnTypeList = [...list];
      } else {
        this.$message.error(results.msg);
      }
    },
    async onChange(checked, type) {
      console.log('======================checked', checked, type);
      const opt = checked ? 'open' : 'close';
      const param = { groupId: this.groupId, opt: opt, warnType: type };
      const results = await requestHttp({
        api: `${maccApi.SIMULATIONEXPERIENCE_WARNTRIGGER_POST_API}`,
        method: 'POST',
        params: param,
      });
      if (results && results.code == 0) {
        if (opt == 'open') {
          this.$message.success(i18nRender('groupOperate.warnDetail'));
        }
        if (type == 'ALL') {
          this.zhugePoint(`sc-virtualProject-一键开启所有虚拟告警`, {
            workId: 'maccFunApply',
            funcId: 'sc-virtualProject',
            groupId: this.groupId,
            params: param,
          });
          this.getExperienceWarnType();
        } else {
          this.warnTypeList.forEach((item) => {
            if (item.key == type) {
              item.status = opt;
            }
          });
          this.zhugePoint(`sc-virtualProject-开关虚拟项目告警`, {
            workId: 'maccFunApply',
            funcId: 'sc-virtualProject',
            groupId: this.groupId,
            params: param,
          });
        }
      } else {
        this.$message.error(results.msg);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.warnItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
